<template>
  <div class="app">
    <CommentInput @sent-comment="getComment"></CommentInput>
    <CommentList :commentList="commentList" :deleteFunction="deleteFunction"></CommentList>
  </div>

</template>

<script lang="ts" name="App" setup>
import CommentInput from './components/CommentInput.vue'
import CommentList from './components/CommentList.vue'
import { reactive,onBeforeMount, watch, onUpdated } from 'vue'
let commentList=reactive<object[]>([])
// 获取
function loadData(){
  let allComment=localStorage.getItem('commentList')
    if(allComment){
      commentList=reactive(JSON.parse(allComment))
    }
}
onBeforeMount(()=>{
  loadData()
})

// 添加
function getComment(val:object){
  commentList.unshift(val)
  localStorage.setItem('commentList',JSON.stringify(commentList))
}
// 删除
function deleteFunction(index:number){
  commentList.splice(index,1)
  localStorage.setItem('commentList',JSON.stringify(commentList));
}
</script>

<style scoped>
.app{
  border: 1px solid #ddd;
  padding: 30px 20px;
}
</style>